<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>GeoTree Demo</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link href="/css/main.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src= "http://www.google.com/jsapi"> </script> 
    <script type="text/javascript"> google.load("jquery", "1.3.2"); </script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="/js/google-maps-v3-samples.js"></script>
    <script type="text/javascript" src="/js/map.js"></script>
</head>

<body id="index" class="home" onload="initialize_map()">

    <div id="top_bar">
        <div id="header" class="container">
            <h1 class="main-title">GeoTree Demo</h1>
        </div>
    </div>

    <div id="content" class="container">
        
        <div id="map_container"> 
            <div id="map_canvas"></div> 
        </div> 

        <div id="marker_info"> 
        </div> 

        <div id="description">
            <p>
            In this demo 200 most populated cities are added to the GeoTree. To fill the datastore follow instuctions in README file in 'demo' directory.
            </p>
            <p>
            Initially all points are added to tiles of zoom 7. Then the GeoTree tiles are updated up to zoom 2. (These parameters may be changed in config.py file in geotree directory.)
            </p>
            <p>
            In this demo the points are updated when one zooms in or zooms out, not when the map is dragged. During each update all points in a square of 3x3 tiles around the center tile are fetched.
            </p>
            <p>
            The GeoTree is filled so that each tile may not have more than 5 points from child subtiles. The points are arranged by importance. As importance metric in this case we use cities populations.
            </p>
        </div>

    </div> <!-- content -->

</body>
</html>
